<!--
 *           佛曰:
 *                   写字楼里写字间，写字间里程序员；
 *                   程序人员写程序，又拿程序换酒钱。
 *                   酒醒只在网上坐，酒醉还来网下眠；
 *                   酒醉酒醒日复日，网上网下年复年。
 *                   但愿老死电脑间，不愿鞠躬老板前；
 *                   奔驰宝马贵者趣，公交自行程序员。
 *                   别人笑我忒疯癫，我笑自己命太贱；
 *                   不见满街漂亮妹，哪个归得程序员？
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-02-25 11:46:36
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-04-01 17:11:55
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->

<template>
  <el-card class="container" shadow="never">
    <div slot="header" class="header">
      <div class="title">
        资金信息
        <svg-icon icon-class="money-bag" class="icon" />
      </div>
    </div>
    <div class="content">
      <div class="item">
        <div class="title">余额</div>
        <div class="detail red">
          <svg-icon icon-class="s-money" class="icon"></svg-icon>
          {{ userinfo.balance }}
        </div>
      </div>
      <div class="item">
        <div class="title">被冻结</div>
        <div class="detail blue">
          <svg-icon icon-class="snow" class="icon"></svg-icon>
          {{ userinfo.freeze }}
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="item" @click="$router.push('/account/recharge')">
        <svg-icon icon-class="d-money"></svg-icon>
        去充值
      </div>
      <div class="item" @click="$router.push('/account/finance')">
        <svg-icon icon-class="money-log"></svg-icon>
        财务记录
      </div>
    </div>
  </el-card>
</template>
<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      userinfo: state => state.user.userinfo
    })
  },
  methods: {},
}
</script>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';
.content {
  padding-top: 6px;
  display: flex;
  .item {
    flex: 1;
    .title {
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
    }
    .detail {
      margin: 12px 0 0;
      font-size: 20px;
      .icon {
        font-size: 22px;
      }
      &.red {
        color: red;
      }
      &.blue {
        color: $primary;
      }
    }
  }
}
</style>
